<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <form @submit.prevent="demo">
        <label for="account">账号：<input type="text" id="account" v-model.trim="userInfo.account"></label> <br><br>
        <label for="pwd">密码：<input type="password" id="pwd" v-model="userInfo.password"></label> <br><br>
        <label for="age">密码：<input type="number" id="age" v-model.number="userInfo.age"></label> <br><br>
        <label>
            性别：
            男：<input type="radio" name="gender" value="男" v-model="userInfo.gender">
            女：<input type="radio" name="gender" value="女" v-model="userInfo.gender">
        </label> <br><br>
        <label>
            爱好：
            抽烟：<input type="checkbox" value="抽烟" v-model="userInfo.hobby">
            喝酒：<input type="checkbox" value="喝酒" v-model="userInfo.hobby">
            烫头：<input type="checkbox" value="烫头" v-model="userInfo.hobby">
        </label> <br><br>
        <label>
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="天津">天津</option>
                <option value="河北">河北</option>
            </select>
        </label> <br><br>
        <label>
            其他信息： <textarea v-model.lazy="userInfo.other"></textarea>
        </label><br><br>
        <label>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
        </label><br><br>
        <button>提交</button>
    </form>

</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el: "#root",
        data: {
            userInfo: {
                account: "",
                password: "",
                age: "",
                gender: "男",
                hobby: [],
                city: "",
                other: "",
                agree: "",
            }
        },
        methods: {
            demo() {
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>

</body>
</html>